﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="gridCanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>

    <script type="text/javascript">
        let canvasGrid = document.getElementById("gridCanvas"); //绘图区域
        canvasGrid.width = window.innerWidth;
        canvasGrid.height = window.innerHeight;
        let paintGrid = new FCPaint(); //绘图对象
        paintGrid.canvas = canvasGrid;
        scaleCanvas(paintGrid);
        //判断主题色
        paintGrid.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintGrid.defaultUIStyle = "light";
        }
        
        //判断是否移动端
        paintGrid.isMobile = isMobileMode();
        if (paintGrid.isMobile) {
            paintGrid.scaleFactorX = 2.5;
            paintGrid.scaleFactorY = 2.5;
        }

        //创建表格
        let grid = new FCGrid();

        /*
        * 创建列
        * grid:表格
        */
        let createGridColumn = function (grid) {
            let gridColumn = new FCGridColumn();
            if (grid.paint.defaultUIStyle == "dark") {
                gridColumn.backColor = "rgb(0,0,0)";
                gridColumn.borderColor = "rgb(50,50,50)";
                gridColumn.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridColumn.backColor = "rgb(200,200,200)";
                gridColumn.borderColor = "rgb(200,200,200)";
                gridColumn.textColor = "rgb(0,0,0)";
            }
            gridColumn.allowResize = true;
            return gridColumn;
        };

        /*
        * 创建列
        * grid:表格
        */
        let createGridCell = function (grid) {
            let gridCell = new FCGridCell();
            if (grid.paint.defaultUIStyle == "dark") {
                gridCell.backColor = "none";
                gridCell.borderColor = "rgb(50,50,50)";
                gridCell.textColor = "rgb(255,255,255)";
            } else if (grid.paint.defaultUIStyle == "light") {
                gridCell.backColor = "none";
                gridCell.borderColor = "rgb(200,200,200)";
                gridCell.textColor = "rgb(0,0,0)";
            }
            gridCell.font = "Default,13";
            return gridCell;
        };

        /*
        * 初始化表格
        */
        let initGrid = function () {
            grid.dock = "fill";
            addView(grid, paintGrid);
            if (grid.paint.defaultUIStyle == "dark") {
                grid.backColor = "rgb(0,0,0)";
                grid.borderColor = "rgb(100,100,100)";
                grid.textColor = "rgb(255,255,255)";
                grid.scrollBarColor = "rgb(100,100,100)";
            } else if (grid.paint.defaultUIStyle == "light") {
                grid.backColor = "rgb(255,255,255)";
                grid.borderColor = "rgb(150,150,150)";
                grid.textColor = "rgb(0,0,0)";
                grid.scrollBarColor = "rgb(200,200,200)";
            }
            grid.rowHeight = 40;
            //增加列
            let column1 = createGridColumn(grid);
            column1.text = "column1";
            column1.frozen = true;
            column1.width = 100;
            grid.columns.push(column1);

            let column2 = createGridColumn(grid);
            column2.text = "column2";
            column2.width = 100;
            column2.frozen = true;
            grid.columns.push(column2);

            let column3 = createGridColumn(grid);
            column3.text = "column3";
            column3.width = 100;
            column3.frozen = true;
            grid.columns.push(column3);

            let column4 = createGridColumn(grid);
            column4.text = "column4";
            column4.width = 100;
            grid.columns.push(column4);

            let column10 = createGridColumn(grid);
            column10.text = "column5";
            grid.columns.push(column10);
            column10.width = 140;

            let column11 = createGridColumn(grid);
            column11.text = "column6";
            grid.columns.push(column11);
            column11.width = 140;

            let column5 = createGridColumn(grid);
            column5.text = "column7";
            grid.columns.push(column5);

            let column6 = createGridColumn(grid);
            column6.text = "column8";
            grid.columns.push(column6);

            let column7 = createGridColumn(grid);
            column7.text = "column9";
            grid.columns.push(column7);

            let column8 = createGridColumn(grid);
            column8.text = "column10";
            grid.columns.push(column8);

            let column9 = createGridColumn(grid);
            column9.text = "column11";
            grid.columns.push(column9);
            for (let i = 0; i < 100000; i++) {
                let gridRow = new FCGridRow();
                grid.rows.push(gridRow);
                for (let j = 0; j < grid.columns.length; j++) {
                    let cell = new FCGridCell();
                    cell.value = "Cell" + i + "-" + j;
                    cell.textColor = "rgb(255,255,255)";
                    cell.backColor = "rgb(0,0,0)";
                    gridRow.cells.push(cell);
                }
            }
        }

        initGrid();

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Grid = function (view, mp, buttons, clicks, delta) {
            onMouseDownDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Grid = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                //放大显示
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                    //缩小显示
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Grid = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Grid = function (view, mp, buttons, clicks, delta) {
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Grid = function (view, mp, buttons, clicks, delta) {
            onMouseUpDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintGrid.onPaint = function (view, paint, clipRect) {
            onPaintDefault(view, paint, clipRect);
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintGrid.onPaintBorder = function (view, paint, clipRect) {
            onPaintBorderDefault(view, paint, clipRect);
        };

        /*
          * 更新布局的实现方法
          * views:视图集合
          */
        paintGrid.onUpdateView = function (views) {
            updateViewDefault(views);
        }

        /*
        * 表格的点击方法
        * grid: 表格
        * row: 行
        * column: 列
        * cell: 单元格
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        paintGrid.onClickGridCell = function (grid, row, column, cell, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        };

        /*
        * 表格的列点击方法
        * grid: 表格
        * column: 列
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        paintGrid.onClickGridColumn = function (grid, gridColumn, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        };

        //注册事件
        addMouseDownEvent(canvasGrid, paintGrid, onMouseDown_Grid);
        addMouseMoveEvent(canvasGrid, paintGrid, onMouseMove_Grid);
        addMouseWheelEvent(canvasGrid, paintGrid, onMouseWheel_Grid);
        addMouseUpEvent(canvasGrid, paintGrid, onMouseUp_Grid, onClick_Grid);
        addTouchBeginEvent(canvasGrid, paintGrid, onTouchBegin_Grid);
        addTouchMoveEvent(canvasGrid, paintGrid, onTouchMove_Grid);
        addTouchEndEvent(canvasGrid, paintGrid, onTouchEnd_Grid, onClick_Grid);

        /*
        * 重置大小
        */
        let resizeAll = function () {
            canvasGrid.width = document.documentElement.clientWidth;
            canvasGrid.height = document.documentElement.clientHeight;
            scaleCanvas(paintGrid);
            updateViewDefault(paintGrid.views);
            invalidate(paintGrid);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintGrid.views);
        //刷新界面
        invalidate(paintGrid);
    </script>

</body>
</html>
